<template>
	<el-row :gutter="20">
		<div class="text item">
			<el-form :model="form" label-width="120px">
				<el-form-item v-for="(item,index) in form" :key="index" :label="item.title">
					<!-- 普通输入框 字符串-->
					<el-input v-if="item.name === '__tips__'" type="text" v-model="item.value" disabled />
					<!-- 普通输入框 字符串-->
					<el-input v-else-if="item.type === 'string'" type="text" v-model="item.value" />
					<!-- 密码输入框 字符串-->
					<el-input v-else-if="item.type === 'password'" type="password" v-model="item.value" />
					<!-- 多行输入框 字符串-->
					<el-input v-else-if="item.type === 'text'" type="textarea" v-model="item.value" />
					<!-- 数字输入框 字符串-->
					<el-input v-else-if="item.type === 'number'" type="number" v-model="item.value" />
				 <!-- 日期 日期-->
       				 <el-date-picker v-else-if="type === 'date'"    type="date" v-model="item.value"    value-format="YYYY-MM-DD"  ></el-date-picker>
					<!-- 日期时间 日期+时间-->
					<el-date-picker v-else-if="type === 'datetime'"  	type="datetime" v-model="item.value"  value-format="YYYY-MM-DD HH:mm:ss" ></el-date-picker>
					<!-- 时间 时间-->
					<el-time-picker v-else-if="type === 'time'" type="datetime" v-model="item.value"  	value-format="HH:mm:ss"  ></el-time-picker>
					<!-- 滑块参数 -->
					<el-slider v-else-if="type === 'slider'"  	v-model="item.value"  ></el-slider>
					<!-- 颜色输入 -->
					<div v-else-if="type === 'color'" style="line-height: 0;">
						 <el-color-picker v-model="item.value"  ></el-color-picker>
					</div>
					<!-- 评分组件 -->
					<div v-else-if="type === 'rate'"
						style="line-height: 0;">
						<el-rate v-model="item.value" ></el-rate>
					</div>
						<!-- 开关--> 
					  <el-switch  v-else-if="item.type === 'bool'" v-model="item.value"  active-value="1" inactive-value="0"/>
						<!-- 单选-->
		 
					  <el-radio-group   v-model="item.value" class="ml-4"  v-else-if="item.type === 'radio'" >
					  
						<el-radio  v-for="(arrayitem,arraykey) in item.content" :key="arraykey" :label="arraykey">{{arrayitem}}</el-radio> 
				 	</el-radio-group>
					<!-- <editor v-else-if="item.type === 'editor'" name="富文本编辑："   v-model="item.value" /> -->
<!-- 				 
            
            
            'editor'        => __('Editor'),     
            'datetimerange' => __('Datetimerange'),
            'select'        => __('Select'),
            'selects'       => __('Selects'),
            'image'         => __('Image'),
            'images'        => __('Images'),
            'file'          => __('File'),
            'files'         => __('Files'),
            'checkbox'      => __('Checkbox'),     
					<div v-else-if="item.type === 'image'"  >
						<el-upload
							class="avatar-uploader"
							action="http://real-think.jmwl51.com//admin/Ajaxs/upload"
							:show-file-list="false"
							:on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload"
						>
							<img v-if="item.value" :src="'http://real-think.jmwl51.com/'+(item.value)" :class="item.name" />
							<el-icon v-else class="avatar-uploader-icon"  :class="item.name" ><Plus /></el-icon>
						</el-upload>
					</div> -->
				
					 
					<!-- 多选-->
<!-- 		 
				 	<div  v-else-if="item.type === 'checkbox'" >
					 <el-checkbox  v-for="(arrayitem,arraykey) in item.content"  :key="arraykey" :label="arraykey"/> 
					 </div>
						 -->
				 
				
			 
					<!-- 数组 -->
					<div v-else-if="item.type === 'array'">
						<table style="width: 100%">
							<tr v-for="(arrayitem,arraykey) in item.value" :key="arraykey">
								<tb style="width:200px">
									<input class="el-input__inner " v-model="arrayitem.name" type="text"
										style="width:200px">
								</tb>
								<tb style="width:200px">
									<input class="el-input__inner" v-model="arrayitem.value" type="text"
										style="width:200px">
								</tb>
								<tb>
									<el-button @click="delDetailCol(item.value,arraykey)" size="mini">删除</el-button>
								</tb>
							</tr>
						</table>
						<el-button @click="addDetailCol(item.value)" size="mini">添加</el-button>
					</div>



				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">修改</el-button>
				</el-form-item>
			</el-form>
		</div>
	</el-row>
</template>

<script>
	import JmInput from '../../components/form/JmInput.vue';
	import JmEnum from '../../components/form/JmEnum.vue';
	import editor from '../../components/form/Editor.vue';
	
	export default {
		components: {
			JmInput,
			JmEnum,
			editor
		},
		data() {
			return {
				form: {

				}
			}
		},
		props: ['edit_id'],
		//在export default中添加即可不用管顺序
		watch: {
			//监听内容
			edit_id() {
				console.log('edit_id发生了变化')
				this.getDataList()
			}
		},
		
		mounted() {
			this.getDataList()
		},
		methods: {
			// 配置信息列表初始化
			async getDataList() {
				try {
					const res = await this.$api.getconfig({
						'name': this.edit_id
					})
					res.forEach(res => {
						if (res.type == 'array') {
							var arr = []
							console.log(res.value)
							for (var i in res.value) {
								var obj = {
									name: i,
									value: res.value[i]
								}
								arr.push(obj)
							}
							res.value = arr
						}
					})
					this.form = res
				} catch (error) {
					/*console.error(error)*/
				}
			},
	   handleAvatarSuccess(res){
          //
        },
			//删除,带上当前行的id即可row.id
			delDetailCol(array, index) {
				console.log(index)
        array.splice(index, 1)
				// delete array[index]
				//  array.splice(index, 1)
			}, 
			addDetailCol(array) {
				array.push({name:"",value:""});
				//  this.tableData.push({
				//       date: '2016-05-03',
				//       name: 'Tom',
				//       address: 'No. 189, Grove St, Los Angeles',
				//     })
				//     
			},
			onSubmit() { 
				  res =  this.$api.setconfig(this.form,this.edit_id)
				//   const res = await this.$api.setGroup(this.form); 
			},
		},
	};
</script>

<style>
	tb div {
		width: 100%;
	}

	.el-dialog__header {
		box-shadow: 0px 5px 10px #a5a5a5;
		background: #001529;
		color: white;
	}

	.el-dialog__headerbtn .el-dialog__close,
	.el-dialog__title {
		color: white;
	}
</style>
